<template>
  <div class="sidebar">
    <!-- 左侧二级菜单栏的组件封装 -->
    <el-menu
      class="sidebar-el-menu"
      :default-active="toIndex()"
      background-color="white"
      text-color="#7a8297"
      active-text-color="#2d8cf0"
      @select="handleSelect"
      router
    >
      <template >
        <el-menu-item v-for="item in items" :index="item.index" :key="item.index">
          <!-- 需要图标的在 item 对象中加上属性 icon -->
          <!-- <i :class="item.icon"></i> -->
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: ["items"],

  data() {
    return {};
  },
  methods: {
    // 根据路径绑定到对应的二级菜单，防止页面刷新重新跳回第一个
    toIndex() {
      return this.$route.path.split("/")[2];
    },

    //切换菜单栏
    handleSelect(index) {
      // console.log(index + "router===");
      console.log(index + "router===");
      this.$router.push("/" + index.index);
    },
  },
};
</script>

<style scoped>
/* 左侧菜单栏定位和位置大小设定 */
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>